<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>进度条</title>
    <style>
      #myProgress {
        width: 75%;
        background: yellow;
        height: 42px;
      }
      #myBar {
        animation: zx 5s;
        height: 100%;
        width: 0px;
        background: chocolate;
        transition: all 3s;
      }
      @keyframes zx {
        0% {
          width: 0%;
        }
        100% {
          width: 100%;
        }
      }
      #yel {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript 进度条</h1>

    <div id="myProgress">
      <div id="myBar"></div>
    </div>

    <br />
    <div
      style="background-color: pink; width: 80px; height: 80px"
      id="yel"
    ></div>
    <button onclick="move()">点我</button>
    <script>
      bar = document.getElementById("myBar");
      let flag = false;
      function move() {
        // bar.style.animation = "";
        // console.log(bar.style)
        flag = !flag;
        document.getElementById("yel").style.display = flag ? "block" : "";
      }
    </script>
  </body>
</html>
